<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .head{
            width: 300px;
            margin: 20px auto;
        }
        .content{
            display: flex;
        }
        .box{
            border:1px solid seagreen;
            margin-right: 20px;
            text-align: center;
            width: 320px;
        }
    </style>
</head>
<body>
    <button id="btn">测试MOCK数据</button>
    <div class="head">
        <h1>MOCK数据好精彩</h1>
    </div>
    <div class="content">
        <!-- 数据模板 -->
        <div class="box" style="display:none">
           <p class="title">'Afnvndbzf Qmbrnguxeo Kuyz Ipeefw'</p>
           <p class="name">'Karen Rodriguez'</p>
           <image src="http://dummyimage.com/200x200/50B347/FFF&text=Mock.js"/>
           <p class="cadd">湖南省蚌埠市西青区</p>
           <p class="date">'2000-07-30 22:08:11'</p>
        </div>
    </div>
    <!-- <form>
        <label>姓名</label>
        <input type="text" name="username"  />
        <label>年龄</label>
        <input type="text" name="age" />
        <input id="btn" type="button" value="提交"> 
    </form> -->
    <script>
        $(function(){
            var i =  0 ;
            var id = setInterval(function(){
                i++;
                if(i>5){
                    clearInterval(id)
                }
                $(".content").children().remove()
                $.ajax({
                    type:"get",
                    url:"http://127.0.0.1:3000/user",
                    success:function(res){
                         $.each(res.list,function(i,v){
                            $(".content").append("<div class='box' style=background-color:"+v.color+"><p class='name'>"+v.canme+
                                    "</p><image src="+v.image+"/><p class='cadd'>"+v.cadd+"</p><p class='date'>"+v.date+"</p></div>")

                         })
                    }
                })
            },2000)
        })        
    </script>
</body>
</html>